<template>
  <div class="dishonesty">
    <div class="dishonesty_head"></div>
    <!----类型------>
    <div style="width:1200px;height: 133px;margin: 0 auto 20px; padding: 0 10px; background: #FFFFFF;box-shadow: 0 0 8px 0 rgba(17,80,225,0.20);border-radius: 8px;">
      <div :class="[index == nameIndex ? 'sonChannelDiv on' : 'sonChannelDiv']" v-for="(item,index) in name_list" @click="changeIndex(index)">
        <i v-if="index == 0" class="iconfont icon-a-icon-zantingmingdan"></i>
        <i v-if="index == 1" class="iconfont icon-a-icon-shixinmingdan"></i>
        <span :class="[index == nameIndex ? 'sonChannelSpan sonChannelSpan1' : 'sonChannelSpan sonChannelSpan2']">{{ item.name }}</span>
      </div>
    </div>
    <!----搜索------>
    <div class="dis_search">
      <el-form :model="formInline" ref="queryRef" :inline="true">
          <el-form-item label="处理主体类型">
            <el-select v-model="formInline.zhutileixing" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option label="供应商" value="供应商"></el-option>
              <el-option label="专家" value="专家"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商/专家名称">
            <el-input v-model="formInline.name" placeholder="请输入您要查询的内容"></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码/身份证号码">
            <el-input v-model="formInline.bianmar" placeholder="请输入您要查询的内容"></el-input>
          </el-form-item>
          <el-form-item label="组织形式">
            <el-select v-model="formInline.zuzhixingshi" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option label="集中采购" value="集中采购"></el-option>
              <el-option label="自行采购" value="自行采购"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="处理日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="请选择开始时间" v-model="formInline.startTime" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" style="text-align:center">~</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="请选择结束时间" v-model="formInline.endTime" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-----列表----->
    <div class="dis_list">
      <div v-if="nameIndex == 0" class="noticeShowLabels" style="width: 1160px">
        <span style="float: none;width: 40px;text-align: left;color: #fff;font-weight: Bold;margin-left: 20px;">序号</span>
        <span style="float: none;width: 70px;color: #fff;font-weight: bold">处理编号</span>
        <span style="float: none;width: 200px;text-align: left;color: #fff;font-weight: Bold;">供应商/专家名称</span>
        <span style="float: none;width: 230px;text-align: left;color: #fff;font-weight: Bold;">统一社会信用代码/身份证号码</span>
        <span style="float: none;width: 170px;text-align: left;color: #fff;font-weight: Bold;">暂停生效范围（单位）</span>
        <span style="float: none;width: 80px;color: #fff;font-weight: bold">处理日期</span>
        <span style="float: none;width: 70px;color: #fff;font-weight: bold;margin-left: 10px;">处理部门</span>
        <span style="float: none;width: 220px;color: #fff;font-weight: bold;margin-left: 10px;">备注</span>
      </div>
      <div v-if="nameIndex == 1" class="noticeShowLabels" style="width: 1160px">
        <span style="float: none;width: 40px;text-align: left;color: #fff;font-weight: Bold;margin-left: 20px;">序号</span>
        <span style="float: none;width: 70px;color: #fff;font-weight: bold">处理编号</span>
        <span style="float: none;width: 200px;text-align: left;color: #fff;font-weight: Bold;">供应商/专家名称</span>
        <span style="float: none;width: 230px;text-align: left;color: #fff;font-weight: Bold;">统一社会信用代码/身份证号码</span>
        <span style="float: none;width: 70px;color: #fff;font-weight: bold;margin-left: 10px;">处理结果</span>
        <span style="float: none;width: 80px;color: #fff;font-weight: bold">处理日期</span>
        <span style="float: none;width: 170px;text-align: left;color: #fff;font-weight: Bold;">处罚生效范围（单位）</span>
        <span style="float: none;width: 220px;color: #fff;font-weight: bold;margin-left: 10px;">备注</span>
      </div>
      <div class="cont">
        <ul v-if="nameIndex == 0">
          <li v-for="(item,index) in newsList" >
            <!-- <a :href="'/dishonestyDetail?id=' + item.id" target="_blank"> -->
              <span class=" ellipsis" style="width: 40px;margin-left:20px;">{{ index + 1 + (formInline.pageNum - 1) * formInline.pageSize }}</span>
              <span class=" ellipsis" style="width: 70px; "><a :title="item.chulibianhao">{{ item.chulibianhao }}</a></span>
              <span class=" ellipsis" style="width: 200px;"><a :title="item.name">{{ item.name }}</a></span>
              <span class=" ellipsis" style="width: 230px;"><a :title="item.bianma">{{ item.bianma }}</a></span>
              <span class=" ellipsis" style="width: 170px; "><a :title="item.shengxiaofanwei1">{{ item.shengxiaofanwei1 }}</a></span>
              <span class=" ellipsis" style="width: 80px;"><a :title="item.zantingshijian">{{ item.zantingshijian }}</a></span>
              <span class=" ellipsis" style="width: 70px;margin-left: 10px !important;"><a :title="item.chulibumen">{{ item.chulibumen }}</a></span>
              <span class=" ellipsis" style="width: 220px;margin-left: 10px !important;"><a :title="item.char1">{{ item.char1 }}</a></span>
            <!-- </a> -->
          </li>
        </ul>
        <ul v-if="nameIndex == 1">
          <li v-for="(item,index) in newsList" >
            <!-- <a :href="'/dishonestyDetail?id=' + item.id" target="_blank"> -->
              <span class=" ellipsis" style="width: 40px;margin-left:20px;">{{ index + 1 + (formInline.pageNum - 1) * formInline.pageSize }}</span>
              <span class=" ellipsis" style="width: 70px; "><a :title="item.chulibianhao">{{ item.chulibianhao }}</a></span>
              <span class=" ellipsis" style="width: 200px;"><a :title="item.name">{{ item.name }}</a></span>
              <span class=" ellipsis" style="width: 230px;"><a :title="item.bianma">{{ item.bianma }}</a></span>
              <span class=" ellipsis" style="width: 70px;margin-left: 10px !important;"><a :title="item.chulijieguo">{{ item.chulijieguo }}</a></span>         
              <span class=" ellipsis" style="width: 80px;"><a :title="item.zantingshijian">{{ item.zantingshijian }}</a></span>
              <span class=" ellipsis" style="width: 170px; "><a :title="item.shengxiaofanwei1">{{ item.shengxiaofanwei1 }}</a></span>
              <span class=" ellipsis" style="width: 220px;margin-left: 10px !important;"><a :title="item.char1">{{ item.char1 }}</a></span>
            <!-- </a> -->
          </li>
        </ul>
      </div>
      
      
      <div class="page">
        <div style="display: flex" class="flex-align-center flex-pack-center">
            <el-pagination
            :small="true"
            :background="true"
            @current-change="handleSizeChange"
            :current-page="formInline.pageNum" 
            :page-size="formInline.pageSize" 
            layout="slot, prev, pager, next"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            >
                <button :disabled="formInline.pageNum == 1" @click="handleSizeChange(1)" class="btn-prev">
                    首页
                </button>
            </el-pagination>
            <el-pagination
            style="float: right;"
            :small="true"
            :background="true"
            layout="slot"
            :total="total"
            :current-page="formInline.pageNum" 
            :page-size="formInline.pageSize" 
            prev-text="上一页"
            next-text="下一页"
            @current-change="handleSizeChange"
            >
                <button :disabled="pageindex == reCount" @click="handleSizeChange(reCountpage)" class="btn-prev">尾页</button>
            </el-pagination>
            <el-pagination
            style="float: right;"
            :small="true"
            :background="true"
            layout="jumper"
            :total="total"
            :current-page="formInline.pageNum" 
            :page-size="formInline.pageSize" 
            prev-text="上一页"
            next-text="下一页"
            @current-change="handleSizeChange"
            />
            </el-pagination>
            <el-pagination
            :small="true"
            :background="true"
            @current-change="handleSizeChange"
            :current-page="formInline.pageNum" 
            :page-size="formInline.pageSize" 
            layout="slot"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            >
                <span class="el-pagination__total" style="padding-right:20px;">共{{ pageindex }} 页 </span>
                <span class="el-pagination__total" style="padding-right:20px;">每页 20 条</span>
                <span class="el-pagination__total" style="padding-right:20px;">合计{{ total }}条数据</span>
            </el-pagination>
            
        </div>    
    </div>
    </div>

    <div class="special_foot">
      <div class="foot_cont flex flex-space-around">
        <span>版权所有：东部战区总医院</span>
        <span>技术支持：医学信息数据室</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
::v-deep.el-pagination.is-background.el-pagination--small .btn-next,
::v-deep.el-pagination.is-background.el-pagination--small .btn-prev{
  // min-width: 30px;
  height: 36px;
  border: 1px solid #cccccc;
  line-height: 36px;
  background: #ffffff;
  padding:0px 10px;
}
::v-deep.el-pagination.is-background.el-pagination--small .el-pager li{
  height: 36px;
  border: 1px solid #cccccc;
  line-height: 36px;
  font-size: 16px;
  background: #ffffff;
  padding:0px 15px;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active{
 color: #ffffff;
 background: #0372d9;
 border: 0px;
}
::v-deep.el-pagination--small span:not([class*=suffix]), 
::v-deep.el-pagination--small button{
  line-height: 36px;
  height: 36px;
}
::v-deep.el-pagination--small .el-pagination__editor.el-input .el-input__inner{
  line-height: 36px;
}
::v-deep.el-pagination--small .el-pagination__editor.el-input .el-input__inner{
  height: 36px;
}
.el-pagination--small .btn-prev,
.el-pagination--small .el-pager li, .el-pagination--small .el-pager li.btn-quicknext,
.el-pagination--small .el-pager li:last-child,
.el-pagination--small .btn-next,
.el-pagination--small .el-pager li{
  font-size: 16px;
  line-height: 30px;
  height: 30px;
  padding: 0;
}
.el-pager .number {
  border-bottom: none;
}
.el-pager .more {
  border-bottom: none;
}
</style>
<script setup name="dishonesty">
import { getcaigouList } from "@/api/yxzx/dishonesty";
export default {
  components: {
  },
  data() {
    return {
      formInline:{
        chulileixing: '暂停名单',
        zhutileixing: '',
        name: '',
        bianma: '',
        zuzhixingshi: '',
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
      pageindex: 1,
      pagesize: 6,
      reCount: 0,
      reCountpage: 0,
      newsList: [],
      name_list:[
        {name: '采购暂停名单'},{name: '采购失信名单'}
      ],
      nameIndex: 0,
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 类型切换
    changeIndex(index){
      this.formInline.pageNum = 1
      this.nameIndex = index
      if(index == 0){
        this.formInline.chulileixing = '暂停名单'
      } else {
        this.formInline.chulileixing = '失信名单'
      }
      this.getList()
    },
    // 搜索重置
    resetQuery(){
      this.formInline = {
        zhutileixing: '',
        name: '',
        bianma: '',
        zuzhixingshi: '',
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 16,
      }
      this.getList()
    },
    // 重置按钮
    handleQuery(){
      this.getList()
    },
    // 查询
    getList() {
      this.loading = true;
      getcaigouList(
        this.formInline.chulileixing,
        this.formInline.zhutileixing,
        this.formInline.name,
        this.formInline.bianma,
        this.formInline.zuzhixingshi,
        this.formInline.startTime,
        this.formInline.endTime,
        this.formInline.pageNum,
        this.formInline.pageSize,
      ).then((response) => {
        this.newsList = response.rows;
        this.total = response.total;
        this.reCountpage = Math.ceil(response.total/20)
      });
    },
    handleSizeChange(val) {
      this.formInline.pageNum = val;
      this.getList()
    },
  }
  
} 
</script>
   